self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-11 18:13:52 +02:00
Code Issues Releases Activity

Automatically add the .focalboard-body class to all sass classes on plugin mode (#1068)

Browse Source 
* Automatically add the .focalboard-body class to all sass classes on plugin mode

* Addressing review comment
This commit is contained in:
Jesús Espino 2021-08-25 13:05:12 +02:00 committed by GitHub
parent a3fabc45a0
commit dfb34d81a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
95 changed files with 158 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
mattermost-plugin/webapp/loaders/globalScssClassLoader.js Normal file
View File

@ -0,0 +1,21 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
function blockList(line) {
return line.startsWith('.focalboard-body') ||
line.startsWith('.GlobalHeaderComponent') ||
line.startsWith('.channel-header__icon .LogoIcon') ||
line.startsWith('.focalboard-plugin-root');
}
module.exports = function loader(source) {
var newSource = [];
source.split('\n').forEach((line) => {
if ((line.startsWith('.') || line.startsWith('#')) && !blockList(line)) {
newSource.push('.focalboard-body ' + line);
} else {
newSource.push(line);
}
});
return newSource.join('\n');
};

1
mattermost-plugin/webapp/webpack.config.js
View File

@ -90,6 +90,7 @@ module.exports = {
'style-loader', 'style-loader',
'css-loader', 'css-loader',
'sass-loader', 'sass-loader',
path.resolve(__dirname, 'loaders/globalScssClassLoader'),
], ],
}, },
{ {

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

@ -1,4 +1,4 @@
.focalboard-body .BlockIconSelector { .BlockIconSelector {
.octo-icon { .octo-icon {
display: flex; display: flex;
line-height: 1.1; line-height: 1.1;

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

@ -1,4 +1,4 @@
.focalboard-body .CardDetail { .CardDetail {
.title { .title {
width: 100%; width: 100%;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .Comment { .Comment {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 5px 0; margin: 5px 0;

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

@ -1,4 +1,4 @@
.focalboard-body .CommentsList { .CommentsList {
padding: 8px 0; padding: 8px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -1,4 +1,4 @@
.focalboard-body .CenterPanel { .CenterPanel {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -12,7 +12,7 @@
} }
.focalboard-body .BoardComponent { .BoardComponent {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
webapp/src/components/content/checkboxElement.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .CheckboxElement { .CheckboxElement {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 34px; min-height: 34px;

2
webapp/src/components/content/dividerElement.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .DividerElement { .DividerElement {
padding-top: 16px; padding-top: 16px;
border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.09); border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
margin-bottom: 17px; margin-bottom: 17px;

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

@ -1,4 +1,4 @@
.focalboard-body .ContentBlock { .ContentBlock {
.MenuWrapper, .MenuWrapper,
.dnd-handle { .dnd-handle {
display: none; display: none;

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

@ -1,4 +1,4 @@
.focalboard-body .Dialog { .Dialog {
&.dialog-back { &.dialog-back {
position: fixed; position: fixed;
top: 0; top: 0;

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

@ -1,4 +1,4 @@
.focalboard-body .EmptyCenterPanel { .EmptyCenterPanel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -1,4 +1,4 @@
.focalboard-body .FlashMessages { .FlashMessages {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -1,4 +1,4 @@
.focalboard-body .Gallery { .Gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;

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

@ -1,4 +1,4 @@
.focalboard-body .GalleryCard { .GalleryCard {
position: relative; position: relative;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.09); border: 1px solid rgba(var(--center-channel-color-rgb), 0.09);
border-radius: var(--default-rad); border-radius: var(--default-rad);

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

@ -1,4 +1,4 @@
.focalboard-body .Kanban { .Kanban {
overflow: auto; overflow: auto;
flex: 1; flex: 1;

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

@ -1,4 +1,4 @@
.focalboard-body .KanbanCard { .KanbanCard {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
display: flex; display: flex;

2
webapp/src/components/kanban/kanbanColumn.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .octo-board-column { .octo-board-column {
&.dragover { &.dragover {
background-color: rgba(128, 192, 255, 0.15); background-color: rgba(128, 192, 255, 0.15);
} }

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

@ -1,6 +1,6 @@
/* Markdown Editor */ /* Markdown Editor */
.focalboard-body .MarkdownEditor { .MarkdownEditor {
cursor: text; cursor: text;
/* CodeMirror / SimpleMDE / EasyMDE overrides */ /* CodeMirror / SimpleMDE / EasyMDE overrides */

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

@ -1,4 +1,4 @@
.focalboard-body .Modal { .Modal {
position: absolute; position: absolute;
top: 25px; top: 25px;
left: -240px; left: -240px;

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

@ -1,4 +1,4 @@
.focalboard-body .ModalWrapper { .ModalWrapper {
position: relative; position: relative;
overflow: unset; overflow: unset;
} }

2
webapp/src/components/properties/link/link.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .property-link { .property-link {
display: flex; display: flex;
align-items: center; align-items: center;

2
webapp/src/components/properties/user/user.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .UserProperty { .UserProperty {
margin-right: 20px; margin-right: 20px;
min-width: 120px; min-width: 120px;

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

@ -1,4 +1,4 @@
.focalboard-body .ShareBoardComponent { .ShareBoardComponent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;

2
webapp/src/components/sidebar/registrationLink.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .RegistrationLink { .RegistrationLink {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;

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

@ -1,4 +1,4 @@
.focalboard-body .Sidebar { .Sidebar {
flex: 0 0 240px; flex: 0 0 240px;
display: flex; display: flex;

2
webapp/src/components/sidebar/sidebarAddBoardMenu.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .SidebarAddBoardMenu { .SidebarAddBoardMenu {
.menu-entry { .menu-entry {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,4 +1,4 @@
.focalboard-body .SidebarBoardItem { .SidebarBoardItem {
.octo-sidebar-item { .octo-sidebar-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
webapp/src/components/sidebar/sidebarSettingsMenu.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .SidebarSettingsMenu { .SidebarSettingsMenu {
.menu-entry { .menu-entry {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,4 +1,4 @@
.focalboard-body .SidebarUserMenu { .SidebarUserMenu {
.logo { .logo {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
webapp/src/components/table/horizontalGrip.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .HorizontalGrip { .HorizontalGrip {
width: 5px; width: 5px;
cursor: ew-resize; cursor: ew-resize;
flex-shrink: 0; flex-shrink: 0;

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

@ -1,4 +1,4 @@
.focalboard-body .TableRow { .TableRow {
.open-button { .open-button {
display: none; display: none;

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

@ -1,4 +1,4 @@
.focalboard-body .TopBar { .TopBar {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 25px; right: 25px;

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

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

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

@ -1,4 +1,4 @@
.focalboard-body .FilterEntry { .FilterEntry {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
> div { > div {

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

@ -1,2 +1,2 @@
.focalboard-body .FilterValue { .FilterValue {
} }

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

@ -1,4 +1,4 @@
.focalboard-body .ViewHeader { .ViewHeader {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,4 +1,4 @@
.focalboard-body .ViewTitle { .ViewTitle {
> div { > div {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;

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

@ -1,4 +1,4 @@
.focalboard-body .Workspace { .Workspace {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
webapp/src/pages/boardPage.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .BoardPage { .BoardPage {
> .error { > .error {
background-color: rgba(230, 192, 192, 0.9); background-color: rgba(230, 192, 192, 0.9);
text-align: center; text-align: center;

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

@ -1,4 +1,4 @@
.focalboard-body .ChangePasswordPage { .ChangePasswordPage {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 15px; border-radius: 15px;
width: 450px; width: 450px;

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

@ -1,4 +1,4 @@
.focalboard-body .ErrorPage { .ErrorPage {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 15px; border-radius: 15px;
width: 450px; width: 450px;

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

@ -1,4 +1,4 @@
.focalboard-body .LoginPage { .LoginPage {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 15px; border-radius: 15px;
width: 450px; width: 450px;

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

@ -1,4 +1,4 @@
.focalboard-body .RegisterPage { .RegisterPage {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 15px; border-radius: 15px;
width: 450px; width: 450px;

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

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

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

@ -1,4 +1,4 @@
.focalboard-body .Button { .Button {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;

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

@ -1,4 +1,4 @@
.focalboard-body .ButtonWithMenu { .ButtonWithMenu {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
text-align: center; text-align: center;

2
webapp/src/widgets/buttons/iconButton.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .IconButton { .IconButton {
height: 24px; height: 24px;
width: 24px; width: 24px;
padding: 0; padding: 0;

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

@ -1,4 +1,4 @@
.focalboard-body .Editable { .Editable {
cursor: text; cursor: text;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@ -1,4 +1,4 @@
.focalboard-body .EditableDayPicker { .EditableDayPicker {
.DayPickerInput { .DayPickerInput {
input { input {
cursor: text; cursor: text;

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

@ -1,4 +1,4 @@
.focalboard-body .EmojiPicker { .EmojiPicker {
.emoji-mart { .emoji-mart {
color: rgb(var(--center-channel-color-rgb)); color: rgb(var(--center-channel-color-rgb));
background: rgb(var(--center-channel-bg-rgb)); background: rgb(var(--center-channel-bg-rgb));

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

@ -1,4 +1,4 @@
.focalboard-body .AddIcon { .AddIcon {
color: rgb(var(--center-channel-color-rgb), 0.5); color: rgb(var(--center-channel-color-rgb), 0.5);
font-size: 16px; font-size: 16px;
} }

2
webapp/src/widgets/icons/board.scss
View File

@ -1,6 +1,6 @@
@use './standardIcon.scss'; @use './standardIcon.scss';
.focalboard-body .BoardIcon { .BoardIcon {
@extend .StandardIcon; @extend .StandardIcon;
stroke-width: 8px; stroke-width: 8px;
} }

2
webapp/src/widgets/icons/card.scss
View File

@ -1,6 +1,6 @@
@use './standardIcon.scss'; @use './standardIcon.scss';
.focalboard-body .CardIcon { .CardIcon {
@extend .StandardIcon; @extend .StandardIcon;
stroke-width: 6px; stroke-width: 6px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .CheckIcon { .CheckIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .CloseIcon { .CloseIcon {
color: rgb(var(--center-channel-color-rgb), 0.5); color: rgb(var(--center-channel-color-rgb), 0.5);
font-size: 24px; font-size: 24px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .DeleteIcon { .DeleteIcon {
fill: rgba(var(--center-channel-color-rgb), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .DisclosureTriangleIcon { .DisclosureTriangleIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .DividerIcon { .DividerIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .DotIcon { .DotIcon {
fill: rgba(var(--center-channel-color-rgb), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
width: 24px; width: 24px;
height: 24px; height: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .DropdownIcon { .DropdownIcon {
color: rgb(var(--center-channel-color-rgb)); color: rgb(var(--center-channel-color-rgb));
font-size: 16px; font-size: 16px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .DuplicateIcon { .DuplicateIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .EditIcon { .EditIcon {
fill: rgba(var(--center-channel-color-rgb), 0.5); fill: rgba(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .EmojiIcon { .EmojiIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

2
webapp/src/widgets/icons/focalboard_logo.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .FocalboardLogoIcon { .FocalboardLogoIcon {
width: 32px; width: 32px;
height: 32px; height: 32px;
fill: rgba(var(--sidebar-text-rgb), 0.7); fill: rgba(var(--sidebar-text-rgb), 0.7);

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

@ -1,4 +1,4 @@
.focalboard-body .GalleryIcon { .GalleryIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .GripIcon { .GripIcon {
fill: rgb(var(--center-channel-color-rgb), 0.5); fill: rgb(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .HamburgerIcon { .HamburgerIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .HelpIcon { .HelpIcon {
color: rgba(var(--sidebar-text-rgb), 0.7); color: rgba(var(--sidebar-text-rgb), 0.7);
font-size: 16px; font-size: 16px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .HideIcon { .HideIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .HideSidebarIcon { .HideSidebarIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .ImageIcon { .ImageIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

2
webapp/src/widgets/icons/logo.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .LogoIcon { .LogoIcon {
font-size: 16px; font-size: 16px;
color: rgba(var(--sidebar-text-rgb), 0.7); color: rgba(var(--sidebar-text-rgb), 0.7);
} }

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

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

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

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

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

@ -1,4 +1,4 @@
.focalboard-body .OptionsIcon { .OptionsIcon {
color: rgba(var(--center-channel-color-rgb), 0.5); color: rgba(var(--center-channel-color-rgb), 0.5);
font-size: 16px; font-size: 16px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .ShowIcon { .ShowIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .ShowSidebarIcon { .ShowSidebarIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 6px; stroke-width: 6px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .SortDownIcon { .SortDownIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .SortUpIcon { .SortUpIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 8px; stroke-width: 8px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .StandardIcon { .StandardIcon {
stroke: rgba(var(--center-channel-color-rgb), 0.5); stroke: rgba(var(--center-channel-color-rgb), 0.5);
stroke-width: 4px; stroke-width: 4px;
fill: none; fill: none;

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

@ -1,4 +1,4 @@
.focalboard-body .SubmenuTriangleIcon { .SubmenuTriangleIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

2
webapp/src/widgets/icons/table.scss
View File

@ -1,6 +1,6 @@
@use './standardIcon.scss'; @use './standardIcon.scss';
.focalboard-body .TableIcon { .TableIcon {
@extend .StandardIcon; @extend .StandardIcon;
stroke-width: 8px; stroke-width: 8px;
} }

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

@ -1,4 +1,4 @@
.focalboard-body .TextIcon { .TextIcon {
fill: rgba(var(--center-channel-color-rgb), 0.7); fill: rgba(var(--center-channel-color-rgb), 0.7);
stroke: none; stroke: none;
width: 24px; width: 24px;

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

@ -1,4 +1,4 @@
.focalboard-body .Label { .Label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 2px 8px; padding: 2px 8px;

2
webapp/src/widgets/menu/colorOption.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .ColorOption { .ColorOption {
.menu-colorbox { .menu-colorbox {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;

2
webapp/src/widgets/menu/labelOption.scss
View File

@ -1,4 +1,4 @@
.focalboard-body .Menu { .Menu {
.LabelOption.menu-option { .LabelOption.menu-option {
cursor: auto; cursor: auto;
&:hover { &:hover {

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

@ -1,4 +1,4 @@
.focalboard-body .Menu { .Menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
@ -93,8 +93,8 @@
} }
} }
.focalboard-body .Menu, .Menu,
.focalboard-body .SubMenuOption .SubMenu { .SubMenuOption .SubMenu {
@media screen and (max-width: 430px) { @media screen and (max-width: 430px) {
position: fixed; position: fixed;
top: 0; top: 0;

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

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

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

@ -1,11 +1,11 @@
.focalboard-body .Menu .menu-options .SubMenuOption.open-left { .Menu .menu-options .SubMenuOption.open-left {
padding: 4px 5px; padding: 4px 5px;
.menu-name { .menu-name {
margin-left: 0; margin-left: 0;
} }
} }
.focalboard-body .SubMenuOption { .SubMenuOption {
position: relative; position: relative;
&.open-left { &.open-left {

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

@ -1,4 +1,4 @@
.focalboard-body .MenuWrapper { .MenuWrapper {
position: relative; position: relative;
cursor: pointer; cursor: pointer;

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

@ -1,4 +1,4 @@
.focalboard-body .PropertyMenu { .PropertyMenu {
&.menu-textbox { &.menu-textbox {
font-weight: 400; font-weight: 400;
padding: 2px 10px; padding: 2px 10px;

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

@ -1,4 +1,4 @@
.focalboard-body .Switch { .Switch {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;

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

@ -40,7 +40,7 @@ $tooltop-vertical-offset: 2px;
z-index: 99; z-index: 99;
} }
.focalboard-body .octo-tooltip { .octo-tooltip {
display: inline; display: inline;
// Tooltip itself needs to be relative so // Tooltip itself needs to be relative so
// content and arrow can be absolute to it // content and arrow can be absolute to it

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

@ -1,4 +1,4 @@
.focalboard-body .ValueSelector { .ValueSelector {
width: 100%; width: 100%;
border-radius: var(--default-rad); border-radius: var(--default-rad);
color: rgb(var(--center-channel-color-rgb)); color: rgb(var(--center-channel-color-rgb));
@ -79,7 +79,7 @@
} }
} }
.focalboard-body .label-container > .Label { .label-container > .Label {
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -88,7 +88,7 @@
} }
.focalboard-body .octo-property-value > .Label { .octo-property-value > .Label {
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;