mirror of
https://github.com/mattermost/focalboard.git
synced 2025-02-22 20:25:31 +02:00
Add prettier at least for css (#327)
This reverts commit c95ab685e4a77823247886e01fa044223e247a89 and adds code fixes to scss files Co-authored-by: Jesús Espino <jespinog@gmail.com>
This commit is contained in:
Stefan Huber
GitHub
parent
1b5f580e44
commit
1ed9c6b291
1
.gitignore
vendored
1
.gitignore
vendored
@ -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
4
webapp/.prettierignore
Normal file
@ -0,0 +1,4 @@
|
||||
# Ignore all js/ts files:
|
||||
*.ts
|
||||
*.tsx
|
||||
*.js
|
||||
3
webapp/.prettierrc.json
Normal file
3
webapp/.prettierrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"tabWidth": 4
|
||||
}
|
||||
6
webapp/package-lock.json
generated
6
webapp/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.ContentBlock {
|
||||
.MenuWrapper, .dnd-handle {
|
||||
.MenuWrapper,
|
||||
.dnd-handle {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected{
|
||||
&.selected {
|
||||
background-color: rgba(90, 200, 255, 0.2);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.LogoWithNameIcon, .LogoWithNameWhiteIcon {
|
||||
.LogoWithNameIcon,
|
||||
.LogoWithNameWhiteIcon {
|
||||
max-height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,4 +6,4 @@
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.FilterComponent {
|
||||
min-width: 430px;
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgb(var(--body-color), 0.5);
|
||||
stroke-width: 4px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgb(var(--body-color), 0.5);
|
||||
stroke-width: 4px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.DeleteIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.DisclosureTriangleIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.DividerIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.DotIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
fill: none;
|
||||
stroke: rgb(var(--body-color));
|
||||
stroke-width: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.DuplicateIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.EditIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.EmojiIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.GalleryIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.GripIcon {
|
||||
fill: rgb(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.HelpIcon {
|
||||
fill: rgba(var(--main-fg), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.HideIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.ImageIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.LogoWithNameIcon {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.LogoWithNameWhiteIcon {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.OptionsIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.ShowIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 4px;
|
||||
fill: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.SubmenuTriangleIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.TextIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user