self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-10-31 00:17:42 +02:00
Code Issues Releases Activity

Add prettier at least for css (#327)

Browse Source 
This reverts commit c95ab685e4 and adds code fixes to scss files

Co-authored-by: Jesús Espino <jespinog@gmail.com>
This commit is contained in:
Stefan Huber
2021-04-28 16:28:52 +02:00
committed by GitHub
parent 1b5f580e44
commit 1ed9c6b291
70 changed files with 393 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -51,7 +51,6 @@ octo*.db
focalboard*.db
.eslintcache
.vscode/settings.json
.prettierrc.json
# config.json is copied from app-config.json in the Makefile
mac/resources/config.json
mac/temp

4
webapp/.prettierignore Normal file
View File

@@ -0,0 +1,4 @@
# Ignore all js/ts files:
*.ts
*.tsx
*.js

3
webapp/.prettierrc.json Normal file
View File

@@ -0,0 +1,3 @@
{
"tabWidth": 4
}

6
webapp/package-lock.json generated
View File

@@ -10017,6 +10017,12 @@
"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
"dev": true
},
"prettier": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
"dev": true
},
"pretty-bytes": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

2
webapp/package.json
View File

@@ -10,6 +10,7 @@
"test": "jest",
"check": "eslint --ext .tsx,.ts . --quiet --cache",
"fix": "eslint --ext .tsx,.ts . --quiet --fix --cache",
"fix:scss": "prettier --write './src/**/*.scss'",
"i18n-extract": "formatjs extract src/*/*/*.ts? src/*/*.ts? src/*.ts? --out-file i18n/tmp.json; formatjs compile i18n/tmp.json --out-file i18n/en.json; rm i18n/tmp.json",
"runserver-test": "cd cypress && FOCALBOARD_SINGLE_USER_TOKEN=TESTTOKEN ../../bin/focalboard-server -single-user",
"cypress:ci": "start-server-and-test runserver-test http://localhost:8088 cypress:run",
@@ -86,6 +87,7 @@
"html-webpack-plugin": "^5.3.1",
"isomorphic-fetch": "^3.0.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"start-server-and-test": "^1.12.1",

2
webapp/src/components/blockIconSelector.scss
View File

@@ -4,7 +4,7 @@
line-height: 1.1;
margin-left: 0;
color: #000000;
border-radius: 5px;
border-radius: 5px;
align-items: center;
justify-content: center;
&:not(.readonly):hover {

8
webapp/src/components/cardDetail/cardDetail.scss
View File

@@ -6,10 +6,10 @@
.add-buttons {
display: flex;
flex-direction: column;
min-height: 30px;
color:rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
min-height: 30px;
color: rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
.Button {
display: none;
}

8
webapp/src/components/cardDetail/comment.scss
View File

@@ -53,9 +53,9 @@
}
.comment-text * {
-webkit-user-select: text; /* Chrome all / Safari all */
-moz-user-select: text; /* Firefox all */
-ms-user-select: text; /* IE 10+ */
user-select: text; /* Likely future */
-webkit-user-select: text; /* Chrome all / Safari all */
-moz-user-select: text; /* Firefox all */
-ms-user-select: text; /* IE 10+ */
user-select: text; /* Likely future */
}
}

7
webapp/src/components/cardDetail/commentsList.scss
View File

@@ -1,9 +1,9 @@
.CommentsList {
padding: 8px 0;
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
width: 100%;
width: 100%;
.comment-avatar {
width: 20px;
@@ -32,4 +32,3 @@
}
}
}

3
webapp/src/components/contentBlock.scss
View File

@@ -1,5 +1,6 @@
.ContentBlock {
.MenuWrapper, .dnd-handle {
.MenuWrapper,
.dnd-handle {
display: none;
}
&:hover {

3
webapp/src/components/dialog.scss
View File

@@ -14,7 +14,8 @@
display: flex;
flex-direction: column;
background-color: rgb(var(--main-bg));
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px;
border-radius: var(--modal-rad);
padding: 0;

36
webapp/src/components/flashMessages.scss
View File

@@ -1,23 +1,23 @@
.FlashMessages {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
margin: 0 auto;
padding: 10px 20px;
min-width: 150px;
max-width: 420px;
min-height: 50px;
color: #ffffff;
background: rgba(100, 100, 100, 0.8);
font-size: 18px;
vertical-align: middle;
border-radius: 20px;
z-index: 12;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
margin: 0 auto;
padding: 10px 20px;
min-width: 150px;
max-width: 420px;
min-height: 50px;
color: #ffffff;
background: rgba(100, 100, 100, 0.8);
font-size: 18px;
vertical-align: middle;
border-radius: 20px;
z-index: 12;
&.flashIn {
visibility: visible;

2
webapp/src/components/gallery/galleryCard.scss
View File

@@ -9,7 +9,7 @@
margin-bottom: 10px;
cursor: pointer;
&.selected{
&.selected {
background-color: rgba(90, 200, 255, 0.2);
}

9
webapp/src/components/kanban/kanban.scss
View File

@@ -8,7 +8,7 @@
color: #909090;
}
.octo-board-header-cell{
.octo-board-header-cell {
display: flex;
flex-shrink: 0;
align-items: center;
@@ -29,21 +29,21 @@
}
}
.IconButton{
.IconButton {
background-color: unset;
&:hover {
background-color: rgba(var(--body-color), 0.1);
}
}
.Label{
.Label {
max-width: 165px;
margin-right: 5px;
.Editable {
background: transparent;
}
}
>.Button {
> .Button {
&.IconButton {
cursor: pointer;
}
@@ -51,7 +51,6 @@
}
}
.octo-board-body {
display: flex;
flex-direction: row;

30
webapp/src/components/kanban/kanbanCard.scss
View File

@@ -1,20 +1,21 @@
.KanbanCard {
flex: 0 0 auto;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow-wrap: anywhere;
flex: 0 0 auto;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow-wrap: anywhere;
border-radius: 3px;
margin-bottom: 10px;
padding: 8px 16px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
border-radius: 3px;
margin-bottom: 10px;
padding: 8px 16px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px;
cursor: pointer;
color: rgb(var(--body-color));
cursor: pointer;
color: rgb(var(--body-color));
transition: background 100ms ease-out 0s;
transition: background 100ms ease-out 0s;
&:hover {
background-color: rgba(var(--body-color), 0.1);
@@ -57,7 +58,8 @@
margin-right: 6px;
padding: 0;
background: rgb(var(--body-color), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px;
height: 24px;
width: 24px;
}

8
webapp/src/components/markdownEditor.scss
View File

@@ -1,7 +1,7 @@
/* Markdown Editor */
.MarkdownEditor {
cursor: text;
cursor: text;
/* CodeMirror / SimpleMDE / EasyMDE overrides */
.CodeMirror {
@@ -15,7 +15,8 @@
padding: 0;
}
.CodeMirror, .CodeMirror-scroll {
.CodeMirror,
.CodeMirror-scroll {
flex: 1;
min-height: 0;
line-height: 1.3;
@@ -34,7 +35,8 @@
overflow: hidden !important;
}
/* hide the scrollbars */
.CodeMirror-vscrollbar, .octo-editor .CodeMirror-hscrollbar {
.CodeMirror-vscrollbar,
.octo-editor .CodeMirror-hscrollbar {
display: none !important;
}

4
webapp/src/components/modal.scss
View File

@@ -3,8 +3,8 @@
top: 25px;
left: -240px;
z-index: 10;
background-color: rgb(var(--main-bg));
padding: 10px;
background-color: rgb(var(--main-bg));
padding: 10px;
border-radius: 3px;
box-shadow: var(--elevation-4);

4
webapp/src/components/shareBoardComponent.scss
View File

@@ -3,7 +3,7 @@
flex-direction: column;
padding: 5px;
color: rgb(var(--body-color));
max-width: 400px;
max-width: 400px;
> .row {
display: flex;
@@ -27,4 +27,4 @@
text-overflow: ellipsis;
margin-right: 5px;
}
}
}

10
webapp/src/components/sidebar/sidebar.scss
View File

@@ -20,13 +20,13 @@
background: none;
padding: 0;
>div {
> div {
padding: 0;
margin: auto;
}
}
>* {
> * {
flex: 0 0 auto;
}
@@ -49,7 +49,7 @@
overflow-y: auto;
width: 250px;
>div {
> div {
margin-bottom: 16px;
}
}
@@ -73,13 +73,13 @@
font-weight: 600;
}
>.heading {
> .heading {
line-height: 30px;
cursor: default;
flex-grow: 1;
}
>.IconButton {
> .IconButton {
background-color: var(--sidebar-bg);
&:hover {

4
webapp/src/components/sidebar/sidebarBoardItem.scss
View File

@@ -34,7 +34,7 @@
cursor: pointer;
}
>.Icon {
> .Icon {
stroke: rgba(var(--sidebar-fg), 0.3);
height: 14px;
width: 14px;
@@ -46,7 +46,7 @@
}
}
>.IconButton {
> .IconButton {
background-color: var(--sidebar-bg);
&:hover {

3
webapp/src/components/sidebar/sidebarUserMenu.scss
View File

@@ -4,7 +4,8 @@
flex-direction: row;
align-items: center;
.LogoWithNameIcon, .LogoWithNameWhiteIcon {
.LogoWithNameIcon,
.LogoWithNameWhiteIcon {
max-height: 24px;
width: auto;
}

5
webapp/src/components/table/tableRow.scss
View File

@@ -7,9 +7,10 @@
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
color: rgba(var(--body-color), .64);
color: rgba(var(--body-color), 0.64);
background-color: rgba(var(--body-color), 0.1);
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 2px 4px;
}
}

2
webapp/src/components/topBar.scss
View File

@@ -6,4 +6,4 @@
display: flex;
flex-direction: row;
}
}

2
webapp/src/components/viewHeader/filterComponent.scss
View File

@@ -1,3 +1,3 @@
.FilterComponent {
min-width: 430px;
min-width: 430px;
}

14
webapp/src/components/viewTitle.scss
View File

@@ -1,16 +1,16 @@
.ViewTitle {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
min-width: 300px;
&.add-buttons {
flex-direction: row;
min-height: 30px;
color:rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
min-height: 30px;
color: rgba(var(--body-color), 0.4);
width: 100%;
align-items: flex-start;
.Button {
display: none;
}

6
webapp/src/components/workspace.scss
View File

@@ -1,7 +1,7 @@
.Workspace {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex: 1 1 auto;
display: flex;
flex-direction: row;
overflow: auto;
> .mainFrame {

6
webapp/src/pages/changePasswordPage.scss
View File

@@ -9,7 +9,8 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px,
rgba(var(--main-fg), 0.3) 0px 4px 8px;
form {
display: flex;
@@ -35,7 +36,8 @@
font-weight: 500;
}
.oldPassword, .newPassword {
.oldPassword,
.newPassword {
margin-bottom: 10px;
label {

3
webapp/src/pages/errorPage.scss
View File

@@ -9,7 +9,8 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px;
@media screen and (max-width: 430px) {
position: fixed;

6
webapp/src/pages/loginPage.scss
View File

@@ -8,7 +8,8 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px;
form {
display: flex;
@@ -35,7 +36,8 @@
font-weight: 500;
}
.username, .password {
.username,
.password {
margin-bottom: 10px;
label {

7
webapp/src/pages/registerPage.scss
View File

@@ -9,7 +9,8 @@
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px,
rgba(var(--body-color), 0.3) 0px 4px 8px;
form {
display: flex;
@@ -35,7 +36,9 @@
font-weight: 500;
}
.email, .username, .password {
.email,
.username,
.password {
margin-bottom: 10px;
label {

74
webapp/src/styles/labels.scss
View File

@@ -1,49 +1,67 @@
.propColor0,
.propColorDefault {
background-color: var(--prop-default);
background-color: var(--prop-default);
}
.propColor1, .propColor1:hover,
.propColorGray, .propColorGray:hover {
background-color: var(--prop-gray);
.propColor1,
.propColor1:hover,
.propColorGray,
.propColorGray:hover {
background-color: var(--prop-gray);
}
.propColor2, .propColor2:hover,
.propColorBrown, .propColorBrown:hover {
background-color: var(--prop-brown);
.propColor2,
.propColor2:hover,
.propColorBrown,
.propColorBrown:hover {
background-color: var(--prop-brown);
}
.propColor3, .propColor3:hover,
.propColorOrange, .propColorOrange:hover {
background-color: var(--prop-orange);
.propColor3,
.propColor3:hover,
.propColorOrange,
.propColorOrange:hover {
background-color: var(--prop-orange);
}
.propColor4, .propColor4:hover,
.propColorYellow, .propColorYellow:hover {
background-color: var(--prop-yellow);
.propColor4,
.propColor4:hover,
.propColorYellow,
.propColorYellow:hover {
background-color: var(--prop-yellow);
}
.propColor5, .propColor5:hover,
.propColorGreen, .propColorGreen:hover {
background-color: var(--prop-green);
.propColor5,
.propColor5:hover,
.propColorGreen,
.propColorGreen:hover {
background-color: var(--prop-green);
}
.propColor6, .propColor6:hover,
.propColorBlue, .propColorBlue:hover {
background-color: var(--prop-blue);
.propColor6,
.propColor6:hover,
.propColorBlue,
.propColorBlue:hover {
background-color: var(--prop-blue);
}
.propColor7, .propColor7:hover,
.propColorPurple, .propColorPurple:hover {
background-color: var(--prop-purple);
.propColor7,
.propColor7:hover,
.propColorPurple,
.propColorPurple:hover {
background-color: var(--prop-purple);
}
.propColor8, .propColor8:hover,
.propColorPink, .propColorPink:hover {
background-color: var(--prop-pink);
.propColor8,
.propColor8:hover,
.propColorPink,
.propColorPink:hover {
background-color: var(--prop-pink);
}
.propColor9, .propColor9:hover,
.propColorRed, .propColorRed:hover {
background-color: var(--prop-red);
.propColor9,
.propColor9:hover,
.propColorRed,
.propColorRed:hover {
background-color: var(--prop-red);
}

209
webapp/src/styles/main.scss
View File

@@ -1,49 +1,54 @@
* {
box-sizing: border-box;
box-sizing: border-box;
outline: 0;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
font-family: 'Open Sans', sans-serif;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
font-family: "Open Sans", sans-serif;
}
html, body {
display: flex;
flex-direction: column;
html,
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
color: rgb(var(--body-color));
width: 100%;
height: 100%;
color: rgb(var(--body-color));
background: rgb(var(--main-bg));
}
input, textarea, select, button {
font-size: 100%; /* Normalize */
input,
textarea,
select,
button {
font-size: 100%; /* Normalize */
}
input, textarea {
input,
textarea {
background: rgb(var(--main-bg));
color: rgb(var(--body-color));
color: rgb(var(--body-color));
-webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */
-ms-user-select: auto; /* IE 10+ */
user-select: auto; /* Likely future */
-webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */
-ms-user-select: auto; /* IE 10+ */
user-select: auto; /* Likely future */
}
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
font-family: "Open Sans", sans-serif;
/* -webkit-font-smoothing: auto; */
font-size: 14px;
line-height: 24px;
--cursor-color: rgb(var(--body-color));
font-size: 14px;
line-height: 24px;
--cursor-color: rgb(var(--body-color));
}
a {
text-decoration: none;
text-decoration: none;
color: var(--link-color);
&:visited {
@@ -56,66 +61,67 @@ a {
}
hr {
width: 100%;
height: 1px;
border: none;
color: rgba(var(--body-color), 0.09);
background-color: rgba(var(--body-color), 0.09);
margin-bottom: 8px;
width: 100%;
height: 1px;
border: none;
color: rgba(var(--body-color), 0.09);
background-color: rgba(var(--body-color), 0.09);
margin-bottom: 8px;
}
button {
&.style--none {
&.style--none {
background: transparent;
border: none;
padding: 0;
}
padding: 0;
}
}
.page-loading {
margin: 50px auto;
margin: 50px auto;
}
.title, h1 {
font-size: 40px;
line-height: 40px;
margin: 0 0 10px 0;
font-weight: 600;
display: inline-block;
.title,
h1 {
font-size: 40px;
line-height: 40px;
margin: 0 0 10px 0;
font-weight: 600;
display: inline-block;
}
/* App frame */
#main-app {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
}
#main-app #frame,
#main-app #main,
#main-app .BoardPage {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
}
/* Main app */
.octo-app {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: auto;
}
.octo-frame {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: scroll;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: scroll;
padding: 24px 80px 8px;
@@ -125,92 +131,93 @@ button {
}
.dragover {
background-color: rgba(128, 192, 255, 0.4);
background-color: rgba(128, 192, 255, 0.4);
}
.octo-spacer {
flex: 1;
flex: 1;
}
/* Icons */
.octo-icon {
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
line-height: 1.5em;
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji,
"Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
line-height: 1.5em;
align-self: baseline;
overflow: visible;
}
.octo-icontitle {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
}
/*-- Property list --*/
.octo-propertyvalue {
color: rgb(var(--body-color));
padding: 0 5px;
color: rgb(var(--body-color));
padding: 0 5px;
&.empty {
color: rgba(var(--body-color), 0.4);
color: rgba(var(--body-color), 0.4);
}
}
/*-- Editable --*/
.Editable {
cursor: text;
cursor: text;
}
.Editable.active {
min-width: 100px;
min-width: 100px;
}
.octo-placeholder {
color: rgba(var(--body-color), 0.4);
color: rgba(var(--body-color), 0.4);
}
[contentEditable=true] {
-webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */
-ms-user-select: auto; /* IE 10+ */
user-select: auto; /* Likely future */
[contentEditable="true"] {
-webkit-user-select: auto; /* Chrome all / Safari all */
-moz-user-select: auto; /* Firefox all */
-ms-user-select: auto; /* IE 10+ */
user-select: auto; /* Likely future */
}
[contentEditable=true]:empty:before{
content: attr(placeholder);
display: block;
color: rgba(var(--body-color), 0.4);
[contentEditable="true"]:empty:before {
content: attr(placeholder);
display: block;
color: rgba(var(--body-color), 0.4);
}
.octo-propertyvalue.Editable.active,
.octo-table-cell .Editable.active {
border-radius: 3px;
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
border-radius: 3px;
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}
.octo-block img {
width: calc(100% - 20px);
max-width: 500px;
max-height: 500px;
margin: 5px 0;
max-width: 500px;
max-height: 500px;
margin: 5px 0;
}
.octo-content {
width: 100%;
margin-right: 50px;
width: 100%;
margin-right: 50px;
}
.octo-block {
display: flex;
flex-direction: row;
align-items: flex-start;
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
width: 100%;
@media not screen and (max-width: 975px) {
padding-right: 126px;
@@ -228,12 +235,12 @@ button {
}
.octo-block-margin {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
padding-top: 10px;
padding-right: 10px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
padding-top: 10px;
padding-right: 10px;
@media not screen and (max-width: 975px) {
width: 126px;

18
webapp/src/styles/variables.scss
View File

@@ -12,23 +12,23 @@
// Label Colors
--prop-default: #fff;
--prop-gray: #EDEDED;
--prop-brown: #F7DDC3;
--prop-gray: #ededed;
--prop-brown: #f7ddc3;
--prop-orange: #ffd3c1;
--prop-yellow: #f7f0b6;
--prop-green: #c7eac3;
--prop-blue: #B1D1F6;
--prop-blue: #b1d1f6;
--prop-purple: #e6d0ff;
--prop-pink: #ffd6e9;
--prop-red: #ffa9a9;
// Elevations
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, .8);
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, .12);
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, .12);
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, .12);
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, .12);
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, .12);
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.8);
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12);
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
// Radius
--default-rad: 4px;

16
webapp/src/widgets/buttons/button.scss
View File

@@ -2,20 +2,20 @@
display: flex;
flex: 0 0 auto;
align-items: center;
text-align: center;
text-align: center;
justify-content: center;
border-radius: var(--default-rad);
min-width: 20px;
cursor: pointer;
overflow: hidden;
border-radius: var(--default-rad);
min-width: 20px;
cursor: pointer;
overflow: hidden;
background: transparent;
border: none;
transition: background 100ms ease-out 0s;
color: inherit;
&:hover {
&:hover {
background-color: rgba(var(--body-color), 0.1);
}
}
&.filled {
color: #ffffff;
@@ -23,7 +23,7 @@
padding: 6px 12px;
&:hover {
background-color: rgb(var(--button-bg), 0.8);
background-color: rgb(var(--button-bg), 0.8);
}
}

18
webapp/src/widgets/buttons/buttonWithMenu.scss
View File

@@ -1,21 +1,21 @@
.ButtonWithMenu {
display: flex;
align-items: stretch;
text-align: center;
min-width: 20px;
cursor: pointer;
text-align: center;
min-width: 20px;
cursor: pointer;
overflow: visible;
padding: 0;
.button-text {
padding: 3px 10px;
padding: 3px 10px;
background-color: rgb(var(--button-bg));
color: rgb(var(--button-fg));
border-radius: 5px 0 0 5px;
transition: background 100ms ease-out 0s;
border-radius: 5px 0 0 5px;
transition: background 100ms ease-out 0s;
height: 100%;
&:hover {
&:hover {
background-color: rgba(var(--button-bg), 0.8);
}
}
@@ -26,8 +26,8 @@
display: flex;
padding: 0 3px;
align-items: center;
border-radius: 0 5px 5px 0;
transition: background 100ms ease-out 0s;
border-radius: 0 5px 5px 0;
transition: background 100ms ease-out 0s;
height: 100%;
&:hover {

6
webapp/src/widgets/editable.scss
View File

@@ -1,5 +1,5 @@
.Editable {
cursor: text;
cursor: text;
border: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -7,9 +7,9 @@
min-height: 24px;
&.active {
min-width: 100px;
min-width: 100px;
}
&::placeholder{
&::placeholder {
color: rgba(var(--body-color), 0.4);
opacity: 1;
}

2
webapp/src/widgets/emojiPicker.scss
View File

@@ -5,7 +5,7 @@
border-color: rgba(var(--body-color), 0.16);
.emoji-mart-bar {
border: 0 solid rgba(var(--body-color), 0.16);
border-bottom-width: 1px
border-bottom-width: 1px;
}
.emoji-mart-search input {
border: 1px solid rgba(var(--body-color), 0.16);

4
webapp/src/widgets/icons/add.scss
View File

@@ -2,6 +2,6 @@
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/check.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/close.scss
View File

@@ -2,6 +2,6 @@
stroke: rgb(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/delete.scss
View File

@@ -1,6 +1,6 @@
.DeleteIcon {
fill: rgba(var(--body-color), 0.5);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/disclosureTriangle.scss
View File

@@ -1,6 +1,6 @@
.DisclosureTriangleIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/divider.scss
View File

@@ -1,6 +1,6 @@
.DividerIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/dot.scss
View File

@@ -1,5 +1,5 @@
.DotIcon {
fill: rgba(var(--body-color), 0.5);
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/dropdown.scss
View File

@@ -2,6 +2,6 @@
fill: none;
stroke: rgb(var(--body-color));
stroke-width: 4px;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/duplicate.scss
View File

@@ -1,6 +1,6 @@
.DuplicateIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/edit.scss
View File

@@ -1,6 +1,6 @@
.EditIcon {
fill: rgba(var(--body-color), 0.5);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/emoji.scss
View File

@@ -1,6 +1,6 @@
.EmojiIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/gallery.scss
View File

@@ -1,6 +1,6 @@
.GalleryIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/grip.scss
View File

@@ -1,6 +1,6 @@
.GripIcon {
fill: rgb(var(--body-color), 0.5);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/hamburger.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/help.scss
View File

@@ -1,6 +1,6 @@
.HelpIcon {
fill: rgba(var(--main-fg), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/hide.scss
View File

@@ -1,6 +1,6 @@
.HideIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/hideSidebar.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/image.scss
View File

@@ -1,6 +1,6 @@
.ImageIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/logoWithName.scss
View File

@@ -1,4 +1,4 @@
.LogoWithNameIcon {
width: 150px;
height: 32px;
width: 150px;
height: 32px;
}

4
webapp/src/widgets/icons/logoWithNameWhite.scss
View File

@@ -1,4 +1,4 @@
.LogoWithNameWhiteIcon {
width: 150px;
height: 32px;
width: 150px;
height: 32px;
}

4
webapp/src/widgets/icons/options.scss
View File

@@ -1,5 +1,5 @@
.OptionsIcon {
fill: rgba(var(--body-color), 0.5);
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/show.scss
View File

@@ -1,6 +1,6 @@
.ShowIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/showSidebar.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 6px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/sortDown.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/sortUp.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 8px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/standardIcon.scss
View File

@@ -2,6 +2,6 @@
stroke: rgba(var(--body-color), 0.5);
stroke-width: 4px;
fill: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/submenuTriangle.scss
View File

@@ -1,6 +1,6 @@
.SubmenuTriangleIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

4
webapp/src/widgets/icons/text.scss
View File

@@ -1,6 +1,6 @@
.TextIcon {
fill: rgba(var(--body-color), 0.7);
stroke: none;
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}

22
webapp/src/widgets/label.scss
View File

@@ -1,18 +1,18 @@
.Label {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 3px;
line-height: 20px;
color: rgba(var(--body-color), .8);
white-space: nowrap;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 3px;
line-height: 20px;
color: rgba(var(--body-color), 0.8);
white-space: nowrap;
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
input {
line-height: 20px;
color: rgba(var(--body-color), .8);
color: rgba(var(--body-color), 0.8);
text-transform: uppercase;
font-weight: 600;
font-size: 13px;

22
webapp/src/widgets/menu/menu.scss
View File

@@ -29,7 +29,7 @@
color: rgb(var(--body-color));
>.menu-option {
> .menu-option {
display: flex;
flex-direction: row;
align-items: center;
@@ -43,32 +43,32 @@
background: rgba(var(--button-bg), 0.08);
}
>* {
> * {
margin-left: 16px;
}
>*:first-child {
> *:first-child {
margin-left: 0;
}
>.menu-name {
> .menu-name {
display: flex;
flex-grow: 1;
white-space: nowrap;
}
>.SubmenuTriangleIcon {
> .SubmenuTriangleIcon {
fill: rgba(var(--body-color), 0.7);
}
>.Icon {
> .Icon {
opacity: 0.56;
width: 16px;
height: 16px;
line-height: 16px;
}
>.IconButton .Icon {
> .IconButton .Icon {
margin-right: 0;
}
}
@@ -119,22 +119,22 @@
flex: 0 0 auto;
>.menu-option {
> .menu-option {
min-height: 44px;
width: 100%;
padding: 0 20px;
background-color: rgb(var(--main-bg));
>* {
> * {
flex: 0 0 auto;
}
>.noicon {
> .noicon {
width: 16px;
height: 16px;
}
>.menu-name {
> .menu-name {
font-size: 16px;
justify-content: center;
}

4
webapp/src/widgets/menu/separatorOption.scss
View File

@@ -1,4 +1,4 @@
.MenuSeparator {
border-bottom: solid 1px rgba(var(--body-color), 0.16);
margin: 8px 0;
border-bottom: solid 1px rgba(var(--body-color), 0.16);
margin: 8px 0;
}

4
webapp/src/widgets/menu/subMenuOption.scss
View File

@@ -10,7 +10,9 @@
margin: 0 !important;
border-radius: 3px;
box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 3px 6px, rgba(var(--body-color), 0.2) 0px 9px 24px;
box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px,
rgba(var(--body-color), 0.1) 0px 3px 6px,
rgba(var(--body-color), 0.2) 0px 9px 24px;
left: 100%;
&.top {
bottom: 0;

18
webapp/src/widgets/switch.scss
View File

@@ -1,14 +1,14 @@
.Switch {
display: flex;
flex-shrink: 0;
display: flex;
flex-shrink: 0;
box-sizing: content-box;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(var(--body-color), 0.24);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(var(--body-color), 0.24);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
&.on {
background-color: rgb(var(--button-bg));
@@ -26,5 +26,3 @@
transform: translateX(0px) translateY(0px);
}
}