mirror of
https://github.com/plankanban/planka.git
synced 2025-07-28 01:29:44 +02:00
Background gradients, migrate from CSS to SCSS, remove !important
This commit is contained in:
Maksim Eltyshev
parent
196121bd38
commit
ff95a12578
312 changed files with 4295 additions and 2989 deletions
|
|
@ -7,7 +7,7 @@ import { ActionTypes } from '../../../constants/Enums';
|
|||
import AddComment from './AddComment';
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './Actions.module.css';
|
||||
import styles from './Actions.module.scss';
|
||||
|
||||
const Actions = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px !important;
|
||||
height: 32px !important;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0 !important;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: -40px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
40
client/src/components/CardModal/Actions/Actions.module.scss
Normal file
40
client/src/components/CardModal/Actions/Actions.module.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
:global(#app) {
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px;
|
||||
height: 32px;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: -40px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useForm } from '../../../hooks';
|
||||
|
||||
import styles from './AddComment.module.css';
|
||||
import styles from './AddComment.module.scss';
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
text: '',
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 0 !important;
|
||||
box-sizing: border-box;
|
||||
color: #333 !important;
|
||||
display: block;
|
||||
line-height: 1.5 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 6px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useForm } from '../../../hooks';
|
||||
|
||||
import styles from './EditComment.module.css';
|
||||
import styles from './EditComment.module.scss';
|
||||
|
||||
const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
box-sizing: border-box;
|
||||
color: #333 !important;
|
||||
display: block;
|
||||
line-height: 1.4 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import { ActionTypes } from '../../../constants/Enums';
|
|||
import ItemComment from './ItemComment';
|
||||
import User from '../../User';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(({ type, data, createdAt, user }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
33
client/src/components/CardModal/Actions/Item.module.scss
Normal file
33
client/src/components/CardModal/Actions/Item.module.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
:global(#app) {
|
||||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import EditComment from './EditComment';
|
|||
import User from '../../User';
|
||||
import DeletePopup from '../../DeletePopup';
|
||||
|
||||
import styles from './ItemComment.module.css';
|
||||
import styles from './ItemComment.module.scss';
|
||||
|
||||
const ItemComment = React.memo(
|
||||
({ data, createdAt, isPersisted, user, isEditable, onUpdate, onDelete }) => {
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: #fff;
|
||||
border-radius: 0px 8px 8px;
|
||||
box-shadow: 0 1px 2px -1px rgba(9, 30, 66, 0.25),
|
||||
0 0 0 1px rgba(9, 30, 66, 0.08);
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
margin: 1px 2px 4px 1px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
:global(#app) {
|
||||
.author {
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-bottom: 1px solid #092d4221;
|
||||
display: inline-block;
|
||||
padding-bottom: 14px;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6b808c;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: #fff;
|
||||
border-radius: 0px 8px 8px;
|
||||
box-shadow: 0 1px 2px -1px rgba(9, 30, 66, 0.25),
|
||||
0 0 0 1px rgba(9, 30, 66, 0.08);
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: inline-block;
|
||||
margin: 1px 2px 4px 1px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { Menu } from 'semantic-ui-react';
|
|||
import { withPopup } from '../../lib/popup';
|
||||
import { FilePicker, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import styles from './AddAttachmentPopup.module.css';
|
||||
import styles from './AddAttachmentPopup.module.scss';
|
||||
|
||||
const AddAttachmentStep = React.memo(({ onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.divider {
|
||||
background: #eee;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: -7px -12px -5px !important;
|
||||
width: calc(100% + 24px) !important;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0 !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
.tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
:global(#app) {
|
||||
.divider {
|
||||
background: #eee;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { closePopup } from '../../../lib/popup';
|
|||
import { useModal } from '../../../hooks';
|
||||
import AddTextFileModal from './AddTextFileModal';
|
||||
|
||||
import styles from './AddAttachmentZone.module.css';
|
||||
import styles from './AddAttachmentZone.module.scss';
|
||||
|
||||
const AddAttachmentZone = React.memo(({ children, onCreate }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.dropzone {
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
opacity: 0.7;
|
||||
padding: 200px 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
:global(#app) {
|
||||
.dropzone {
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
opacity: 0.7;
|
||||
padding: 200px 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Input } from '../../../lib/custom-ui';
|
|||
|
||||
import { useForm } from '../../../hooks';
|
||||
|
||||
import styles from './AddTextFileModal.module.css';
|
||||
import styles from './AddTextFileModal.module.scss';
|
||||
|
||||
const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { useToggle } from '../../../lib/hooks';
|
|||
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './Attachments.module.css';
|
||||
import styles from './Attachments.module.scss';
|
||||
|
||||
const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
.toggleButton {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #6b808c !important;
|
||||
font-weight: normal !important;
|
||||
margin-top: 8px !important;
|
||||
padding: 6px 11px !important;
|
||||
text-align: left !important;
|
||||
text-decoration: underline !important;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
color: #092d42 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
:global(#app) {
|
||||
.toggleButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6b808c;
|
||||
font-weight: normal;
|
||||
margin-top: 8px;
|
||||
padding: 6px 11px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
|
|||
import { useForm, useSteps } from '../../../hooks';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
||||
import styles from './EditPopup.module.css';
|
||||
import styles from './EditPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
DELETE: 'DELETE',
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
:global(#app) {
|
||||
.deleteButton {
|
||||
bottom: 12px;
|
||||
box-shadow: 0 1px 0 #cbcccc;
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Icon, Label, Loader } from 'semantic-ui-react';
|
|||
|
||||
import EditPopup from './EditPopup';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,121 +0,0 @@
|
|||
.button {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 28px !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
opacity: 0;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.details {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 32px 6px 128px;
|
||||
margin: 0;
|
||||
min-height: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.extension {
|
||||
color: #5e6c84;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.option {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
color: #172b4d;
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
border-radius: 3px;
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border-radius: 3px;
|
||||
height: 80px;
|
||||
left: 0;
|
||||
margin-top: -40px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: 50%;
|
||||
width: 112px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.thumbnailLabel {
|
||||
border-color: rgba(29, 46, 63, 0.8) !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper:hover .details {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.wrapper:hover .target {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wrapperSubmitting {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
125
client/src/components/CardModal/Attachments/Item.module.scss
Normal file
125
client/src/components/CardModal/Attachments/Item.module.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.details {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 32px 6px 128px;
|
||||
margin: 0;
|
||||
min-height: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.extension {
|
||||
color: #5e6c84;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #17394d;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.option {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: #172b4d;
|
||||
}
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
border-radius: 3px;
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border-radius: 3px;
|
||||
height: 80px;
|
||||
left: 0;
|
||||
margin-top: -40px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: 50%;
|
||||
width: 112px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.thumbnailLabel {
|
||||
border-color: rgba(29, 46, 63, 0.8);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
min-height: 80px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.details {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapperSubmitting {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ import EditTimerPopup from '../EditTimerPopup';
|
|||
import MoveCardPopup from '../MoveCardPopup';
|
||||
import DeletePopup from '../DeletePopup';
|
||||
|
||||
import styles from './CardModal.module.css';
|
||||
import styles from './CardModal.module.scss';
|
||||
|
||||
const CardModal = React.memo(
|
||||
({
|
||||
|
|
|
|||
|
|
@ -1,217 +0,0 @@
|
|||
.actionButton {
|
||||
background: #ebeef0 !important;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.13) !important;
|
||||
color: #444 !important;
|
||||
margin-top: 8px !important;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 6px 18px !important;
|
||||
text-align: left !important;
|
||||
text-overflow: ellipsis;
|
||||
transition: background 85ms ease !important;
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
background: #dfe3e6 !important;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.25) !important;
|
||||
color: #4c4c4c !important;
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
color: #17394d !important;
|
||||
display: inline !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.actionsTitle {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 16px;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.addAttachment {
|
||||
margin: 0 -4.3px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
margin: 0 8px 8px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contentPadding {
|
||||
padding: 8px 8px 0 16px !important;
|
||||
}
|
||||
|
||||
.dueDate {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
padding: 6px 14px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dueDate:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #17394d;
|
||||
}
|
||||
|
||||
.descriptionButton {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.descriptionButton:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
|
||||
.descriptionButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.descriptionText img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #f5f6f7;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.headerPadding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin: 4px 0;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
margin: 12px 48px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labels {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
min-width: 40px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modalPadding {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px !important;
|
||||
height: 32px !important;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0 !important;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #6b808c;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 20px;
|
||||
margin: 0 8px 4px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebarPadding {
|
||||
padding: 8px 16px 0 8px !important;
|
||||
}
|
||||
|
||||
/* .wrapper {
|
||||
min-width: 768px;
|
||||
} */
|
||||
219
client/src/components/CardModal/CardModal.module.scss
Normal file
219
client/src/components/CardModal/CardModal.module.scss
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
:global(#app) {
|
||||
.actionButton {
|
||||
background: #ebeef0;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.13);
|
||||
color: #444;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 6px 18px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
transition: background 85ms ease;
|
||||
|
||||
&:hover {
|
||||
background: #dfe3e6;
|
||||
box-shadow: 0 1px 0 0 rgba(9, 30, 66, 0.25);
|
||||
color: #4c4c4c;
|
||||
}
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
color: #17394d;
|
||||
display: inline;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.actionsTitle {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 16px;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.addAttachment {
|
||||
margin: 0 -4.3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: inline-block;
|
||||
margin: 0 8px 8px 0;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentModule {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contentPadding {
|
||||
padding: 8px 8px 0 16px;
|
||||
}
|
||||
|
||||
.dueDate {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
padding: 6px 14px;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #17394d;
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionButton {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #f5f6f7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.headerPadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin: 4px 0;
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
margin: 12px 48px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labels {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin: 0 4px 4px 0;
|
||||
max-width: 100%;
|
||||
min-width: 40px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modalPadding {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.moduleHeader {
|
||||
color: #17394d;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin: 0 0 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.moduleIcon {
|
||||
color: #17394d;
|
||||
font-size: 17px;
|
||||
height: 32px;
|
||||
left: -40px;
|
||||
line-height: 32px;
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.moduleWrapper {
|
||||
margin: 0 0 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarPadding {
|
||||
padding: 8px 16px 0 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #6b808c;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 20px;
|
||||
margin: 0 8px 4px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* .wrapper {
|
||||
min-width: 768px;
|
||||
} */
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useField } from '../../hooks';
|
||||
|
||||
import styles from './EditDescription.module.css';
|
||||
import styles from './EditDescription.module.scss';
|
||||
|
||||
const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.controls {
|
||||
clear: both !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.5 !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
24
client/src/components/CardModal/EditDescription.module.scss
Normal file
24
client/src/components/CardModal/EditDescription.module.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { useDidUpdate, usePrevious } from '../../lib/hooks';
|
|||
|
||||
import { useField } from '../../hooks';
|
||||
|
||||
import styles from './NameField.module.css';
|
||||
import styles from './NameField.module.scss';
|
||||
|
||||
const NameField = React.memo(({ defaultValue, onUpdate }) => {
|
||||
const prevDefaultValue = usePrevious(defaultValue);
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.field {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
color: #17394d;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin: -5px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
background: #fff;
|
||||
border-color: #5ba4cf;
|
||||
box-shadow: 0 0 2px 0 #5ba4cf;
|
||||
outline: 0;
|
||||
}
|
||||
24
client/src/components/CardModal/NameField.module.scss
Normal file
24
client/src/components/CardModal/NameField.module.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
color: #17394d;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin: -5px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: #5ba4cf;
|
||||
box-shadow: 0 0 2px 0 #5ba4cf;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import { Popup } from '../../../lib/custom-ui';
|
|||
import { useSteps } from '../../../hooks';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
||||
import styles from './ActionsPopup.module.css';
|
||||
import styles from './ActionsPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
DELETE: 'DELETE',
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.menu {
|
||||
margin: -7px -12px -5px !important;
|
||||
width: calc(100% + 24px) !important;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0 !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
:global(#app) {
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { useDidUpdate, useToggle } from '../../../lib/hooks';
|
|||
|
||||
import { useClosableForm, useForm } from '../../../hooks';
|
||||
|
||||
import styles from './Add.module.css';
|
||||
import styles from './Add.module.scss';
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
name: '',
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.controls {
|
||||
clear: both !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.08) !important;
|
||||
border-radius: 3px !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
line-height: 1.5 !important;
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 4px !important;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: 6px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
25
client/src/components/CardModal/Tasks/Add.module.scss
Normal file
25
client/src/components/CardModal/Tasks/Add.module.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.08);
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: 6px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
|
|||
|
||||
import { useClosableForm, useField } from '../../../hooks';
|
||||
|
||||
import styles from './EditName.module.css';
|
||||
import styles from './EditName.module.scss';
|
||||
|
||||
const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff !important;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13) !important;
|
||||
border-radius: 3px !important;
|
||||
box-sizing: border-box !important;
|
||||
color: #17394d !important;
|
||||
display: block !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.5 !important;
|
||||
overflow: hidden !important;
|
||||
padding: 8px 12px !important;
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 9px 32px 16px 40px;
|
||||
}
|
||||
28
client/src/components/CardModal/Tasks/EditName.module.scss
Normal file
28
client/src/components/CardModal/Tasks/EditName.module.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
clear: both;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 9px 32px 16px 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Button, Checkbox, Icon } from 'semantic-ui-react';
|
|||
import EditName from './EditName';
|
||||
import ActionsPopup from './ActionsPopup';
|
||||
|
||||
import styles from './Item.module.css';
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete }) => {
|
||||
const editName = useRef(null);
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
.button {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 28px !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
opacity: 0;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: rgba(9, 30, 66, 0.08) !important;
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
display: inline-block;
|
||||
padding: 10px 15px 0px 8px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
vertical-align: top;
|
||||
z-index: 2000;
|
||||
line-height: 1;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
}
|
||||
|
||||
.content:hover .target {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.task {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 8px 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
min-height: 32px;
|
||||
padding: 0 32px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 3px;
|
||||
margin-left: -40px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
transition: all 0.14s ease-in;
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
75
client/src/components/CardModal/Tasks/Item.module.scss
Normal file
75
client/src/components/CardModal/Tasks/Item.module.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
width: 28px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
display: inline-block;
|
||||
padding: 10px 15px 0px 8px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
vertical-align: top;
|
||||
z-index: 2000;
|
||||
line-height: 1;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
|
||||
.target {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.task {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 8px 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskCompleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
min-height: 32px;
|
||||
padding: 0 32px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 3px;
|
||||
margin-left: -40px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
transition: all 0.14s ease-in;
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { Progress } from 'semantic-ui-react';
|
|||
import Item from './Item';
|
||||
import Add from './Add';
|
||||
|
||||
import styles from './Tasks.module.css';
|
||||
import styles from './Tasks.module.scss';
|
||||
|
||||
const Tasks = React.memo(({ items, onCreate, onUpdate, onDelete }) => {
|
||||
const [t] = useTranslation();
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
.progress {
|
||||
margin: 0 0 16px !important;
|
||||
}
|
||||
|
||||
.taskButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskButton:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
color: #092d42;
|
||||
}
|
||||
|
||||
.taskButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
32
client/src/components/CardModal/Tasks/Tasks.module.scss
Normal file
32
client/src/components/CardModal/Tasks/Tasks.module.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
:global(#app) {
|
||||
.progress {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.taskButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #6b808c;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
min-height: 54px;
|
||||
outline: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.04);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
|
||||
.taskButtonText {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue